<template>
  <el-card shadow="hover" style="max-width: 500px; margin: 40px auto; border-radius: 16px;">
    <div style="display: flex; flex-direction: column; align-items: center;">
      <el-avatar size="large" icon="el-icon-user" style="margin-bottom: 16px;" />
      <h2>测试用户</h2>
      <el-tag type="success" style="margin-bottom: 16px;">开发者</el-tag>
    </div>
    <el-divider />
    <el-form label-width="80px" @submit.prevent>
      <el-form-item label="昵称">
        <el-input v-model="nickname" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="email" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save" :loading="saving" icon="el-icon-check">保存</el-button>
      </el-form-item>
    </el-form>
    <el-alert v-if="showSuccess" title="保存成功！" type="success" show-icon style="margin-top: 16px;" />
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const nickname = ref('测试用户')
const email = ref('user@example.com')
const saving = ref(false)
const showSuccess = ref(false)
function save() {
  saving.value = true
  setTimeout(() => {
    saving.value = false
    showSuccess.value = true
    setTimeout(() => showSuccess.value = false, 1500)
  }, 1000)
}
</script>
